import React, {
  Component
} from 'react'

import "./index.scss"
import src from "../../assets/img/logo-img.png";
import succesed from "../../assets/img/get-success.png";
class SucessCode extends Component {
  constructor(props) {
    super(props)
    this.state = {
      isWx: false
    }
  }
  componentWillMount() {
    var ua = navigator.userAgent.toLowerCase();
    if (ua.match(/MicroMessenger/i) == "micromessenger") {

      this.setState({
        isWx: true
      })
    } else {
      this.setState({
        isWx: false
      })
    }
  }
  render() {
    return (
      <div >
         <div className="ab-top-box" style={{paddingBottom: '.3rem'}}>
             <h4 style={{paddingTop: '.22rem'}}><img style={{width: '1.4rem'}} src={src}/></h4>
             <p className="intro-code">
               <img style={{width: '2.25rem'}} src={succesed} alt=""/>
             </p>
           <ul className="sucs-top-list">
             <li>VIP体验卡已通过短信发送至您的手机</li>
             <li>2017-05-20前激活有效，激活后请在2天内使用</li>
           </ul>
         </div>

        <div className="ab-foot-box re-school-list-box" style={{marginTop: '.2rem'}}>
          <h4>如何使用体验卡</h4>
          <div className="suce-step">
            <ul className="sucs-step-list">
              <li>
                <span className="cicle left"></span>
                <p className="intro-fotip" style={{marginBottom: '0',marginTop: '0'}}>请在微信中搜索公众号 <a href="javascript:;">[百姓关注]</a> 或 <a href="javascript:;"> [志愿百科]</a> 使用</p>
              </li>
              <li>
                <span className="cicle left"></span>
                <p className="intro-fotip" style={{marginBottom: '0',marginTop: '0'}}>首页点击“我的→已购卡”</p>
              </li>
              <li>
                <span className="cicle left"></span>
                <p className="intro-fotip" style={{marginBottom: '0',marginTop: '0'}}>输入VIP体验卡的卡号和密码即可使用</p>
              </li>
            </ul>
          </div>
        </div>
        {this.state.isWx && <div className="footer fix-foot">
          <a href="http://mp.weixin.qq.com/s/7vcIvZUlBx2ahZ317wR00w">立即关注志愿百科<i className="right-icon"></i></a>
        </div>}
      </div>
    )
  }

}
export default SucessCode